import React,{Component} from 'react';
import { connect } from "react-redux";
import { fetchList, addToCart} from "../actions/product";
import axios from 'axios';

export default class ProductDetail extends Component{
    constructor(props){
        super(props);

        this.state = {
            list:[]
        }
    }

    componentWillMount(){
        var  cid= this.props.match.params.id;
        console.log(cid,8888)
        // var id=this.props.location.pathname.split('/')[2];
        axios.post('http://localhost:3000/product/lists', 
        {
    //         //  _id:cid
             cateId:cid
        })
        .then((res)=>{
            console.log(res,2222222222)
            this.setState({
                list: res.data.docs
            })
        })
    }

    
   
    render(){
        const list = this.state.list;
        var ls=[];
        for(let i=0;i<list.length ;i++){
            //console.log(list[i].title);
            ls.push(
                <div className="featurette"  key={i}>
                    <img className="featurette-image pull-left"  src={`../../public/img/${list[i].pic}`} alt="" />
                    <h2 className="featurette-heading">商品名称：{list[i].title}</h2>
                    <p className="muted">商品价格：{list[i].price}</p>
                    <p clasName="lead">商品描述：{list[i].desc}</p>
                    <a className="btn btn-primary"  href="javascript:void(0)" role="button" >添加到收藏</a>
                    <a className="btn btn-danger"  href="javascript:void(0)" role="button" >加入购物车</a>
                </div>
            )
        }
        return (
            <div className="container">
                <h1>
              详情页面
                </h1>
                <hr className="featurette-divider"/>
               {ls}
            </div>
        )
    }
}


